<template>
  <div>
    <x-header></x-header>
    <div class="x-apply">
      <x-banner :image="bannerImage"></x-banner>
      <div class="section section-1">
        <c-page-header title="APPLICATION FORM" subtitle="Arrival Orientation"></c-page-header>
        <div class="card">
          <div class="card--inner">
            <div class="card--form__main clearfix">
              <div class="card-base--info">
                <div class="card-base--info__input">
                  <x-input :onChange="onChangeFirstName" placeholder="First Name"></x-input>
                  <x-input :onChange="onChangeSumame" placeholder="Sumame"></x-input>
                  <x-input :onChange="onChangeEmail" placeholder="Email"></x-input>
                  <x-input :onChange="onChangePhone" placeholder="Phone With Int.dialling Code"></x-input>
                </div>
                <div class="card--select">
                  <div class="card--select__item">
                    <p class="item--title__label">Do you have a Bachelor's degree?</p>
                    <div class="item__label clearfix">
                      <label class="item">
                        <input type="radio" name="radioDegree">
                        <span>Yes</span>
                      </label>
                      <label class="item">
                        <input type="radio" name="radioDegree">
                        <span>No</span>
                      </label>
                      <label class="item">
                        <input type="radio" name="radioDegree">
                        <span>Graduating Soon</span>
                      </label>
                    </div>
                  </div>
                  <div class="card--select__item clearfix">
                    <p class="item--title__label">Do you have a Bachelor's degree?</p>
                    <div class="item__label">
                      <label class="item">
                        <input type="radio" name="radioCert">
                        <span>Yes</span>
                      </label>
                      <label class="item">
                        <input type="radio" name="radioCert">
                        <span>No</span>
                      </label>
                      <label class="item">
                        <input type="radio" name="radioCert">
                        <span>Graduating Soon</span>
                      </label>
                    </div>
                  </div>
                  <div class="card--select__item clearfix">
                    <p class="item--title__label">Do you have a Bachelor's degree?</p>
                    <div class="item__label">
                      <label class="item">
                        <input type="radio" name="radioRecord">
                        <span>Yes</span>
                      </label>
                      <label class="item">
                        <input type="radio" name="radioRecord">
                        <span>No</span>
                      </label>
                      <label class="item">
                        <input type="radio" name="radioRecord">
                        <span>Graduating Soon</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-base--other">
                <div class="select-wrap">
                  <select class="select" >
                    <option class="option" value="-1">Select your address</option>
                  </select>
                </div>
                <div class="select-wrap">
                  <select class="select" >
                    <option class="option" value="-1">Select your address</option>
                  </select>
                </div>
                <div class="select-wrap">
                  <select class="select" >
                    <option class="option" value="-1">Select your address</option>
                  </select>
                </div>
                <div class="select-wrap">
                  <select class="select" >
                    <option class="option" value="-1">Select your address</option>
                  </select>
                </div>
                <div class="select-wrap">
                  <select class="select" >
                    <option class="option" value="-1">Select your address</option>
                  </select>
                </div>
                <div class="select--time clearfix">
                  <div class="select-wrap">
                    <select class="select" >
                      <option class="option" value="-1">Date</option>
                    </select>
                  </div>
                  <div class="select-wrap">
                    <select class="select" >
                      <option class="option" value="-1">Month</option>
                    </select>
                  </div>
                  <div class="select-wrap">
                    <select class="select" >
                      <option class="option" value="-1">Year</option>
                    </select>
                  </div>
                </div>

                <div class="select--resume clearfix">
                  <input class="file" type="file">
                  <p class="file--tip">Upload your CV/Resume</p>
                  <button class="btn-uploader">BROWSE</button>
                </div>
              </div>
            </div>
            <div class="card--form__more">
              <textarea placeholder="Please add your cover letter here(100 words max-optional)" class="card--form__more-area"></textarea>
            </div>
            <button class="card--form__submit" @click="onSubmitForm($event)">SUBMIT</button>
            <p class="submit__tip">Your information is safe with us, please check our privacy policy.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import XHeader from '@/components/XHeader'
  import XBanner from '@/components/XBanner'
  import XInput from '@/components/XInput'
  import CPageHeader from '@/components/CPageHeader'

  export default {
    components: {
      CPageHeader,
      XHeader,
      XBanner,
      XInput
    },
    data() {
      return {
        bannerImage: require('../assets/banner/xapply.jpg'),
        formData: {
          firstName: '',
          sumame: '',
          email: '',
          phone: '',
        }
      }
    },
    methods: {
      onChangeFirstName(value) {
        this.formData.firstName = value
      },
      onChangeSumame(value) {
        this.formData.sumame = value
      },
      onChangeEmail(value) {
        this.formData.email = value
      },
      onChangePhone(value) {
        this.formData.phone = value
      },
      onSubmitForm(e) {
        console.log(this.formData)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .section-1 {
    max-width: 1374px;
    margin: -326px auto 80px;
    font-family: Montserrat;
    .header {
      padding-left: 32px;
      padding-bottom: 30px;
    }
    .header--title {
      font-size: 70px;
      font-weight: 700;
      color: #fff;
    }
    .header--subtitle {
      font-size: 21px;
      font-family: ClanPro;
      color: #fff;
    }
    .card {
      padding: 72px 0 92px;
      background: #fff;
      box-shadow: 0 36px 128px rgba(0,0,0,.3);

      .item--title__label {
        color: #353038;
        font-size: 16px;
        margin-bottom: 4px;
      }
    }
    .card--inner {
      width: 918px;
      margin: 0 auto;
    }
    .card-base--info__input {
      width: 412px;
    }
    .card--select__item {
      margin-top: 35px;
      &:first-child {
        margin-top: 45px;
      }
    }
    .card-base--info {
      float: left;
    }
    .card-base--other {
      float: right;
      width: calc(100% - 505px); // 412 + dx(93)
    }
    .card--select {
      .item {
        cursor: pointer;
        float: left;
        font-size: 16px;
        color: #181516;
        margin-left: 40px;
        &:first-child {
          margin-left: 0;
        }
      }
    }

    .card--form__more-area {
      border: 1px #a5a5a5 solid;
      resize: none;
      height: 162px;
      width: 100%;
      padding: 14px 12px;
      color: #353038;
      font-size: 16px;
      box-sizing: border-box;
      display: block;
      margin: 64px 0 42px 0;
      &:focus {
        outline: 0 none;
      }
    }

    .card--form__submit {
      cursor: pointer;
      display: block;
      width: 178px;
      height: 56px;
      margin: 0 auto;
      background: #800000;
      transition: all .2s;
      text-transform: capitalize;
      border: 0 none;
      color: #fff;
      font-size: 30px;
      font-family: Montserrat;
      &:hover {
        background: #8c0000;
        transition: all .2s;
      }
      &:focus {
        outline: 0 none;
      }
    }

    .submit__tip {
      font-size: 16px;
      color: #353038;
      text-align: center;
      margin-top: 15px;
    }
  }

  .select-wrap {
    margin-bottom: 15px;
    position: relative;
    &::after {
      display: block;
      content: '\20';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 6px 0 6px;
      border-color: #353038 transparent transparent transparent;

      position: absolute;
      top: 18px;
      right: 10px;
    }
  }
  .select {
    display: block;
    height: 45px;
    width: 100%;
    border: 1px solid #a5a5a5;
    color: #a5a5a5;
    -webkit-appearance: none;
    border-radius: 0;
    background-color: transparent;
    text-indent: 10px;
    &:focus {
      outline: none;
    }
  }
  .select {
    color: #353038;
  }
  .select--time {
    .select-wrap {
      float: left;
      width: 132px;
      margin-left: 8px;
      &:first-child {
        margin-left: 0;
      }
    }
  }

  .select--resume {
    position: relative;
    margin-top: 65px;

    .file {
      cursor: pointer;
      width: 100%;
      height: 55px;
      position: absolute;
      left: 0px;
      top: 0px;
      opacity: 0;
      &:hover {
        .btn-uploader {
          background: #413b45;
          transition: all .2s;
        }
      }
    }
    .file--tip {
      float: left;
      width: 272px;
      border: 1px #bbbbbb solid;
      color: #353038;
      font-size: 16px;
      height: 55px;
      line-height: 55px;
      text-indent: 35px;
      box-sizing: border-box;
    }
    .btn-uploader {
      float: right;
      background: #353038;
      width: 132px;
      height: 55px;
      color: #fff;
      font-size: 17px;
      text-align: center;
      border: 0 none;
      transition: all .2s;
    }
  }
</style>
